<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立即购买</title>
    <!--处理默认样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--css-->
    <link rel="stylesheet" href="css/ProductDetails.css">
    <!--公共的css-->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2012993_yft1p4lqm1.css">
    <!--引入网页标题图标-->
    <link rel="shortcut icon" href="img/icons/index.ico" type="image/x-icon" />
    <!--引入jq-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type = "text/javascript" src = "js/include.js"></script>
    </head>
<body>
    <!--引入头部-->
    <div id = "header"></div>
    <div class="NavigationBar">
        <div class="container">
            <h2>Redmi K30 至尊纪念版</h2>
            <div class="classification">
                <div class="classification-left">
                    <span>|</span>
                    <a>Redmi K30系列</a>
                </div>
                <div class="classification-right">
                    <a>描述</a>
                    <span>|</span>
                    <a>参数</a>
                    <span>|</span>
                    <a>F码通道</a>
                    <span>|</span>
                    <a>咨询客服</a>
                    <span>|</span>
                    <a>用户评价</a>
                </div>
            </div>
        </div>
    </div>
    <div class="middle">
        <div class="container">
            <div class="container-x">
                <div class="img-left">
                    <div class="img-box">
                        <span class="img-box-left iconfont icon-icon-test2"></span>
                        <span class="img-box-right iconfont icon-icon-test1"></span>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1584945852.46717568.jpg" alt="">
                        <ul class="img-box-Subscript">
                            <li onclick="Carousel(0)"></li>
                            <li onclick="Carousel(1)"></li>
                            <li onclick="Carousel(2)"></li>
                            <li onclick="Carousel(3)"></li>
                            <li onclick="Carousel(4)"></li>
                        </ul>
                    </div>
                </div>
                <div class="product-con">
                    <div class="product-con-box">
                        <h3>Redmi K30 Pro 系列</h3>
                        <span class="product-con-box-text">双模5G / 高通骁龙865 / 弹出式超光感全面屏 /索尼 6400万高清四摄 / 超大面积VC立体散热 /<br>
                        4700mAh+33W疾速闪充 / 多功能NFC / 红外遥控</span>
                        <p title="企业名称：小米通讯技术有限公司
企业执照注册号：91110108558521630L
企业地址：北京市海淀区西二旗中路33号院6 号楼9层019号
企业电话：400-100-5678
营业期限：2010年08月25日 至 2040年08月24日
经营范围：开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；
系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；
销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；
家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）" class="company-info Yellow-color">小米自营</p>
                        <h4 class="Yellow-color">2699 元<del>3399 元</del></h4>
                        <div class="product-con-box-hr">
                            <div class="area-box">
                                <div class="area-box-inside">
                                    <i class="iconfont icon-zuobiao "></i>
                                    <div class="text">
                                        <div><span>北京</span> <span>北京市</span> <span>海淀区清河街道</span> <span class="Yellow-color">修改</span></div>
                                        <div><span class="Yellow-color">有现货</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="Select-product Select-product-margin">
                                <div class="title">选择产品</div>
                                <div class="Select">
                                    <ul>
                                        <li class="select-li">Redmi K30 Pro</li>
                                        <li>Redmi K30 Pro 变焦版</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="Select-version Select-product-margin">
                                <div class="title">选择版本</div>
                                <div class="Select">
                                    <ul>
                                        <li class="select-li">8GB+128GB</li>
                                        <li>8GB+256GB</li>
                                        <li>12GB+128GB</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="Select-color Select-product-margin">
                                <div class="title">选择颜色</div>
                                <div class="Select">
                                    <ul>
                                        <li class="select-li">天际蓝</li>
                                    </ul>
                                </div>
                            </div>
                            <div class=" Choose-accident-protection Select-service-margin">
                                <div class="title">选择小米提供的意外保护</div><div class="Yellow-color detailed"><a>了解意外保护 ></a></div>
                                <div class="content-box content-box-botton">
                                    <div class="Single-choice"><i></i>
                                        <div class="img"><img src="./img/ProductDetails_bao.png" alt=""></div>
                                        <div class="content">
                                            <h3 class="Yellow-color">意外保障服务<em>299元</em></h3>
                                            <p class="text">手机意外碎屏/进水/碾压等损坏</p>
                                            <div class="checkbox">
                                                <input type="checkbox">我已阅读<a class="Yellow-color">服务条款</a><span class="Yellow-color">|</span><a class="Yellow-color">常见问题</a>
                                                <div class="money">299元</div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="content-box">
                                    <div class="Single-choice"><i></i>
                                        <div class="img"><img src="./img/ProductDetails_bao.png" alt=""></div>
                                        <div class="content">
                                            <h3 class="Yellow-color">意外保障服务<em>299元</em></h3>
                                            <p class="text">手机意外碎屏/进水/碾压等损坏</p>
                                            <div class="checkbox">
                                                <input type="checkbox">我已阅读<a class="Yellow-color">服务条款</a><span class="Yellow-color">|</span><a class="Yellow-color">常见问题</a>
                                                <div class="money">299元</div>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div>
                            <div class=" Choose-extended-warranty Select-service-margin">
                                <div class="title">选择小米提供的延长保修</div><div class="Yellow-color detailed"><a>了解延长保修 ></a></div>
                                <div class="content-box content-box-botton">
                                    <div class="Single-choice"><i></i>
                                        <div class="img"><img src="./img/ProductDetails_bao.png" alt=""></div>
                                        <div class="content">
                                            <h3 class="Yellow-color">意外保障服务<em>299元</em></h3>
                                            <p class="text">手机意外碎屏/进水/碾压等损坏</p>
                                            <div class="checkbox">
                                                <input type="checkbox">我已阅读<a class="Yellow-color">服务条款</a><span class="Yellow-color">|</span><a class="Yellow-color">常见问题</a>
                                                <div class="money">299元</div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="content-box">
                                    <div class="Single-choice"><i></i>
                                        <div class="img"><img src="./img/ProductDetails_bao.png" alt=""></div>
                                        <div class="content">
                                            <h3 class="Yellow-color">意外保障服务<em>299元</em></h3>
                                            <p class="text">手机意外碎屏/进水/碾压等损坏</p>
                                            <div class="checkbox">
                                                <input type="checkbox">我已阅读<a class="Yellow-color">服务条款</a><span class="Yellow-color">|</span><a class="Yellow-color">常见问题</a>
                                                <div class="money">299元</div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <div class=" Choose-cloud-space Select-service-margin">
                                <div class="title">选择小米提供的云空间服务</div><div class="Yellow-color detailed"><a>了解云空间服务 ></a></div>
                                <div class="content-box content-box-botton">
                                    <div class="Single-choice"><i></i>
                                        <div class="img"><img src="./img/ProductDetails_yun.jpg" alt=""></div>
                                        <div class="content">
                                            <h3 class="Yellow-color">意外保障服务<em>299元</em></h3>
                                            <p class="text">手机意外碎屏/进水/碾压等损坏</p>
                                            <div class="checkbox">
                                                <input type="checkbox">我已阅读<a class="Yellow-color">服务条款</a><span class="Yellow-color">|</span><a class="Yellow-color">常见问题</a>
                                                <div class="money">299元</div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="content-box">
                                    <div id="xiaozheng" class="Single-choice"><i></i>
                                        <div class="img"><img src="./img/ProductDetails_yun.jpg" alt=""></div>
                                        <div class="content">
                                            <h3 class="Yellow-color">意外保障服务<em>299元</em></h3>
                                            <p class="text">手机意外碎屏/进水/碾压等损坏</p>
                                            <div class="checkbox">
                                                <input type="checkbox">我已阅读<a class="Yellow-color">服务条款</a><span class="Yellow-color">|</span><a class="Yellow-color">常见问题</a>
                                                <div class="money">299元</div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>

                            <div class="product-con-box-bottom">
                                <p>Redmi K30 Pro 8GB+128GB 天际蓝<span>2699元<em>3399元</em></span></p>
                                <p>碎屏保障服务<span>159元</span></p>
                                <spamp class="text Yellow-color">总计：2699元</spamp>
                            </div>

                            <div class="btn-box">
                                <div class="addShoppingCart">
                                    <a>加入购物车</a>
                                </div>

                                <div class="Favorites">
                                    <a><em class="iconfont icon-aixin"></em>收藏</a>
                                </div>
                            </div>

                            <div class="after-sale-info">
                                <span><a href="javascript:void(0);"><em class="iconfont">&#xe60f;</em>小米自营</a></span>
                                <span><a href="javascript:void(0);"><em class="iconfont">&#xe60f;</em>由小米发货</a></span>
                                <span><a href="javascript:void(0);"><em class="iconfont">&#xe60f;</em>7天无理由退货</a></span>
                                <span><a href="javascript:void(0);"><em class="iconfont">&#xe60f;</em>运费说明</a></span>
                                <span><a href="javascript:void(0);"><em class="iconfont">&#xe60f;</em>企业信息</a></span><br>
                                <span><a href="javascript:void(0);"><em class="iconfont">&#xe60f;</em>售后服务政策</a></span>
                                <span><a href="javascript:void(0);"><em class="iconfont">&#xe60f;</em>7天价格保护</a></span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="background-color: #f5f5f5">
        <div class="container">
            <div class="bottom-img">
                <div class="Price-Description">
                    价格说明
                </div>
                <div class="img-box">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a482afa34053b1b32ece1023475af7fb.jpeg" alt="">
                </div>
            </div>
        </div>
    </div>
    <!--引入主体的底部-->
    <div id = "footer"></div>
    <script type="application/javascript" src="js/style.js"></script>
    <script type="application/javascript" src="js/ProductDetails.js"></script>

</body>
</html>